<template>
  <div class="XlsAddedPage">
    <el-form label-width="120px" ref="form" :model="form">
      <el-form-item class="footerFixed">
        <el-button @click="backPage">返回</el-button>
      </el-form-item>
      <el-dialog
        title="添加销售备案码"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div class="box">
          <el-form-item label="地域名称：">
            <el-input v-model.trim="form.address" placeholder="请选输入"></el-input>
          </el-form-item>
          <el-form-item label="销售备案码：">
            <el-input v-model.trim="form.recordCode" placeholder="请选输入"></el-input>
          </el-form-item>
          <el-alert
            title="地域名称和销售备案码均不能为空"
            type="error"
            show-icon
            v-if="bool"
            :closable="false"
          >
          </el-alert>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
    <el-form label-width="120px" v-if="tableData.length > 0">
      <el-dialog
        title="修改销售备案码"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose1"
      >
        <div class="box">
          <el-form-item label="地域名称：">
            <el-input
              v-model.trim="tableData[index].address"
              placeholder="请选输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="销售备案码：">
            <el-input
              v-model.trim="tableData[index].recordCode"
              placeholder="请选输入"
            ></el-input>
          </el-form-item>
          <el-alert
            title="地域名称和销售备案码均不能为空"
            type="error"
            show-icon
            v-if="bool"
            :closable="false"
          >
          </el-alert>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="submit1">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
    <header>
      <div class="li">
        <div>标识分类：</div>
        <span v-if="ListData.fromFactoryName !== null">{{
          ListData.fromFactoryName
        }}</span>
        <span v-else>{{ ListData.factoryName }}</span>
      </div>
      <div class="li">
        <div>产品大类：</div>
        <span>{{ ListData.inventoryType }}</span>
      </div>
      <div class="li">
        <div>名称：</div>
        <span>{{ ListData.breedName }}</span>
      </div>
      <!-- <div class="li">
        <div>装量：</div>
        <span>{{ ListData.loadingQuantity + ListData.loadingUnits }}</span>
      </div>
      <div class="li">
        <div>包装：</div>
        <span>{{ ListData.ypUnits }}</span>
      </div> -->
    </header>
    <div class="comment">
      <el-row style="margin: 20px 0">
        <el-input
          placeholder="请输入关键词"
          v-model.trim="searchName"
          style="width: 300px"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-button slot="append" @click="handleSearch">搜索</el-button>
        </el-input>
        <el-button type="primary" style="float: right; margin-right: 10px" @click="added"
          >添加销售备案码</el-button
        >
      </el-row>
      <div class="table">
        <el-table
          :data="tableData"
          border
          ref="multipleTable"
          header-cell-class-name="table-header"
          height="100%"
        >
          <el-table-column prop="address" sortable label="地域名称"></el-table-column>
          <el-table-column
            prop="recordCode"
            sortable
            label="销售备案码"
          ></el-table-column>

          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  materialBreed_save as materialBreedSave,
  materialBreed_findById as materialBreedFindById,
} from "@/request/manageapi.js";
export default {
  name: "XlsAdded",

  data() {
    return {
      ListData: {},
      id: "",
      tableData: [],
      tableDataCopy: [],
      bool: false,
      dialogVisible: false,
      dialogVisible1: false,
      index: 0,
      form: {
        address: "",
        recordCode: "",
      },
      searchName: "",
    };
  },
  async created() {
    let query = this.$route.query;
    this.id = query.id;
    await this.init(this.id);
  },
  mounted() {},

  methods: {
    init(id) {
      return new Promise((resolve, reject) => {
        materialBreedFindById(id).then((res) => {
          if (res.code == 200) {
            this.ListData = res.data;
            let sellRecord = [];
            if (this.ListData.sellRecord === null) {
              sellRecord = [];
            } else {
              sellRecord = JSON.parse(this.ListData.sellRecord);
            }
            this.tableData = JSON.parse(JSON.stringify(sellRecord));
            this.tableDataCopy = JSON.parse(JSON.stringify(sellRecord));
            resolve(res);
          } else {
            this.ListData = {
              sellRecord: [],
            };
          }
        });
      });
    },
    backPage() {
      this.$router.go(-1);
    },
    materialBreedSave(data) {
      return new Promise((resolve, reject) => {
        materialBreedSave(data).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$notify({
              title: "提示",
              message: "保存成功",
              type: "success",
              duration: 1000,
            });
            resolve(true);
          } else {
            resolve(false);
          }
        });
      });
    },
    added() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.dialogVisible = true;
    },
    handleClose() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.dialogVisible = false;
    },
    handleClose1() {
      this.dialogVisible1 = false;
    },
    setTimes() {
      this.bool = true;
      let Times = setTimeout(() => {
        this.bool = false;
      }, 2000);
    },
    handleEdit(index, data) {
      this.index = index;
      this.dialogVisible1 = true;
    },
    async submit1() {
      let index = this.index;
      let data = JSON.parse(JSON.stringify(this.tableData[index]));
      if (data.address.length > 0 && data.recordCode.length > 0) {
        let tableData = JSON.parse(JSON.stringify(this.tableData));
        let sellRecord = JSON.stringify(tableData);
        this.ListData.sellRecord = sellRecord;
        let flag = await this.materialBreedSave(this.ListData);
        if (flag) {
          await this.init(this.id);
          this.dialogVisible1 = false;
        } else {
          this.$notify({
            title: "提示",
            message: "失败",
            type: "error",
            duration: 1000,
          });
        }
      } else {
        this.setTimes();
      }
    },
    async submit() {
      let data = JSON.parse(JSON.stringify(this.form));
      if (data.address.length > 0 && data.recordCode.length > 0) {
        let tableData = JSON.parse(JSON.stringify(this.tableData));
        tableData.push(data);
        let sellRecord = JSON.stringify(tableData);
        this.ListData.sellRecord = sellRecord;
        let flag = await this.materialBreedSave(this.ListData);
        if (flag) {
          await this.init(this.id);
          this.dialogVisible = false;
        } else {
          this.$notify({
            title: "提示",
            message: "失败",
            type: "error",
            duration: 1000,
          });
        }
      } else {
        this.setTimes();
      }
    },
    handleSearch() {
      let value = String(this.searchName);
      if (value === "") {
        this.tableData = JSON.parse(JSON.stringify(this.tableDataCopy));
      } else {
        let arr = []
        let tableData = JSON.parse(JSON.stringify(this.tableData));
        tableData.map((item) => {
          let str = JSON.stringify(item);
          if (str.includes(value)) {
            arr.push(item)
          }
        });
        if(arr.length>0){
          this.tableData = arr
        }else{
          this.$notify({
            title: "提示",
            message: "无匹配项",
            type: "error",
            duration: 1000,
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-dialog {
  margin: 0 !important;
  width: 500px;
  min-height: 300px;
}
/deep/.el-dialog__footer {
  width: 100%;
  bottom: 0;
  position: absolute;
}
.XlsAddedPage {
  width: 100%;
  min-height: 65vh;
  // background-color: #fff;
  header {
    width: 100%;
    background-color: #fff;
    // height: 209px;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 20px;
    .li {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      display: flex;
      justify-content: flex-start;
      > div {
        width: 80px;
        text-align: right;
      }
    }
  }
  .comment {
    width: 100%;
    max-height: 60vh;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    // overflow: auto;
    .table {
      width: 100%;
      height: 48vh;
      // background-color: pink;
      overflow: auto;
    }
  }
}
</style>
